<template>
  <div class="sidebar">
    <el-menu
      ref="sidebarMenu"
      class="sidebar-el-menu"
      unique-opened
      :default-active="onRoutes"
      :default-openeds="opends"
      :collapse="sidebar.collapse"
      background-color="#e4e4e4e4"
      text-color="#002622"
      active-text-color="#fff"
      router
    >
      <template v-for="item in menuList">
        <template v-if="item.subs">
          <el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-sub-menu
                v-if="subItem.subs"
                :index="subItem.index"
                :key="subItem.index"
                v-permiss="subItem.permiss"
              >
                <template #title>{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                  v-permiss="threeItem.permiss"
                  :class="{ isActive: isActive(threeItem) }"
                >
                  {{ threeItem.title }}
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item
                v-else
                :index="subItem.index"
                v-permiss="subItem.permiss"
                :class="{ isActive: isActive(subItem) }"
              >
                {{ subItem.title }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item
            :index="item.index"
            :key="item.index"
            v-permiss="item.permiss"
            :class="{ isActive: isActive(item) }"
          >
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { computed, ref, watch, onBeforeMount } from "vue";
import { useSidebarStore } from "../store/sidebar";
import { menuStore } from "../store/menu";
import { useRoute } from "vue-router";
import { menuRoutes } from "../router/menu";
import menuList from "./sidebar-menu.js";

const route = useRoute();
const sidebar = useSidebarStore();

const sidebarMenu = ref();

const opends = ref([]);

const onRoutes = computed(() => {
  return route.path;
});

const isActive = computed(() => {
  return function (menuItem) {
    let flag = false;
    if (
      route.matched.some(
        (v) => v.path === menuItem.index || v.meta?.parentSideItem === menuItem.index
      )
    ) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  };
});

//路径携带参数
const equals = (path1, path2) => {
  return path1.split("/")[1] === path2.split("/")[1];
};
//打开原则就是，在路由配置中的parent属性与items中stepDisplayName一致就打开
const getActiveOpens = () => {
  let index = -1;
  if (route.matched && route.matched.length > 1) {
    index = menuList.findIndex((v) => v.stepDisplayName === route.matched[1].name);
  }
  return index === -1 ? ["/duty-management"] : [menuList[index]["index"]];
};

watch(
  () => route.path,
  (n) => {
    if (sidebarMenu.value) {
      if (!sidebar.$state.collapse) {
        sidebarMenu.value.open(getActiveOpens(n));
      }
    }
  }
);
onBeforeMount(() => {
  opends.value = getActiveOpens(route.path);
});
</script>

<style lang="less" scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
  color: #dddddd;
}

.sidebar > ul {
  height: 100%;
}

.el-menu-item.is-active {
  background-color: #009988 !important;
  color: #fff;
}

.el-menu-item.isActive {
  background-color: #009988 !important;
  color: #fff;
}
</style>
